/*4.17 标签*/
/*4.17.1 标签输入效果
    name:      hui-tag
    sample:
      <div class="hui-tag-wrapper">
        <div class="hui-tag-editor clearfix">
          <i class="hui-tag-icon"></i>
          <span class="hui-tag-token">Hui前端框架</span>
          <span class="hui-tag-token">CSS3</span>
          <span class="hui-tag-token">HTML5</span>
          <div class="hui-tag-iptwrap">
            <input type="text" class="hui-tag-input" maxlength="20" value="" >
            <label class="hui-tag-label">添加相关标签，用空格或回车分隔</label>
          </div>
        </div>
        <div class="hui-tag-list">
        <div class="hui-tag-null">暂无常用标签</div>
        <div class="hui-tag-has"><span>前端框架</span> <span>前端开发</span> <span>H-ui</span></div>
        </div>
        <input type="hidden" class="hui-tag-val" name="" value="">
      </div>
*/

.hui-tag-wrapper {
  border: solid 1px #dedede;
  padding: 0 10px;
  .hui-tag-editor {
    position: relative;
    padding: 10px 0 10px 24px;
    min-height: 20px;
    .hui-tag-icon {
      position: absolute;
      left: 0;
      top: 11px;
      font-size: 14px;
      color: #666;
    }
    .hui-tag-token {
      color: #aaa;
      float: left;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      margin-right: 8px;
      padding: 0 1px;
      white-space: nowrap;
      cursor: pointer;
      &:before {
        content: "#";
      }
      &:hover {
        text-decoration: line-through;
      }
    }
    .hui-tag-iptwrap {
      position: relative;
      float: left;
      .hui-tag-input {
        position: relative;
        height: 20px;
        min-width: 60px;
        border: 0 none;
        vertical-align: top;
        line-height: 20px;
        color: #333;
        z-index: 2;
        background: url(../images/Huitags/empty.png) repeat scroll 0 0;
        display: inline-block;
        width: 100%;
      }
    }
    .hui-tag-label {
      position: absolute;
      top: 0;
      left: 2px;
      width: 240px;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      overflow: hidden;
      z-index: 1;
      color: #ccc;
    }
  }
  .hui-tag-list {
    padding: 0 0 10px 0;
    .hui-tag-null {
      font-size: 12px;
    }
    .hui-tag-has span {
      cursor: pointer;
      font-size: 12px;
      white-space: nowrap;
      margin-right: 10px;
    }
  }
}

/*4.17.2 标签混排效果
  name:      hui-tagsmixed
  sample:
    <div class="pd-10 hui-tagsmixed">
      <a class="" href="http://www.h-ui.net/">H-ui前端框架</a>
      ……
    </div>
*/
.hui-tagsmixed {
  a {
    height: 26px;
    line-height: 26px;
    padding-right: 6px;
    &:hover {
      color: #F00;
      text-decoration: underline;
    }
    &.tags1 {
      color: #C00;
      font-size: 24px;
    }
  
    &.tags2 {
      color: #030;
      font-size: 16px;
    }
  
    &.tags3 {
      color: #00F;
    }
  
    &.tags4 {
      font-size: 16px;
    }
  
    &.tags5 {
      color: #C00;
      font-size: 20px;
    }
  
    &.tags6 {
      color: #F06;
      font-size: 20px;
    }
  
    &.tags7 {
      color: #030;
      font-weight: bold;
      font-size: 18px;
    }
  
    &.tags8 {
      color: #F06;
      font-weight: bold;
    }
  
    &.tags9 {
      color: #C00;
      font-weight: bold;
      font-size: 16px;
    }
  }
}